import React  from 'react';
// 状态
class App extends React.Component{
  state = {
    myname: "小明",
  };

  /**
   * 它在组件即将挂载到DOM之前被调用，但在组件实际渲染之前‌
   * 这个方法主要用于进行一些初始化操作，例如设置状态或加载数据。然而，由于其在React 16.3版本后被标记为不安全，并在React 17中被废弃，因此不建议使用‌
  */
  UNSAFE_componentWillMount() {
    //弃用
    console.log(
      "第一次will mount",
      this.state.myname,
      document.getElementById("myname")
    );

    // 第一次上树前的 最后一次修改状态机会
    this.setState({
      myname: "小红",
    });

    //初始化数据的作用。
  }
  /**
   * 它在组件挂载到 DOM 树之后立即调用。
   * 这个方法主要用于执行那些依赖于 DOM 节点的初始化操作，例如网络请求、订阅事件或操作 DOM 节点等‌
   */
  componentDidMount() {
    console.log("第一次did mount", document.getElementById("myname"));
    // 数据请求axios
    // 订阅函数调用
    // setInterval
    // 基于创建的完的dom进行 初始化，，，，，，BetterScroll
  }

  render() {
    console.log("render");
    return (
      <div>
        <span id="myname">{this.state.myname}</span>
      </div>
    );
  }
}

export default App;
